<template>
  <div :class="control_CSS">

    <div class="md_directory" id="md_directory">
      <h3 style="text-align: center;">目录</h3>
      <div v-html="tocHtml" @click="controlWatchNote"></div>
    </div>


    <div class="md_watch">
      <vue-markdown :source="markdown" :toc="true" :toc-first-level="1" :toc-last-level="6"
        @toc-rendered="toc_draw"></vue-markdown>
    </div>

    <!-- 收藏按钮 -->
    <div class="md_start">
      <h4>功能区</h4>
      <div class="ms_link">
        <el-tooltip class="item" effect="dark" content="点赞" placement="right">
          <el-button type="primary" icon="el-icon-sugar" circle plain></el-button>
        </el-tooltip>
      </div>
      <div class="ms_link">
        <el-tooltip class="item" effect="dark" content="收藏" placement="right">
          <el-button type="success" icon="el-icon-cold-drink" circle plain></el-button>
        </el-tooltip>
      </div>
      <div class="ms_link">
        <el-tooltip class="item" effect="dark" content="返回" placement="right">
          <el-button type="warning" icon="el-icon-coffee-cup" circle plain></el-button>
        </el-tooltip>
      </div>
    </div>

  </div>
</template>

<script>
// 引入vue- markdown
import VueMarkdown from 'vue-markdown'
export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      control_CSS: 'WatchNote',
      markdown: '# Hello World!',
      tocHtml: '<i class="el-icon-loading"> </i>',
      note_id: this.$route.query.note_id,
      single_note: {
        "note_id": 1,
        "auther_id": 1,
        "auther_name": "admin",
        "auther_avatar": "http://localhost:3000/data/_r.jpg",
        "title": "测试笔记",
        "cover_img": "http://localhost:3000/data/fengmian.webp",
        "file_address": "http://localhost:3000/data/1687855270712-demoNote.md",
        "create_time": "2023-06-27T04:03:43.000Z",
        "tag": "前端",
        "likes_number": 666,
        "starts_number": 999
      }
    }
  },
  mounted() {
    this.getSingleNoteById()
  },

  methods: {

    // 先按note_id 获取当前单条笔记记录 http://localhost:3000/note/getNoteById
    getSingleNoteById() {
      this.$http({
        url: '/note/getNoteById',
        params: {
          //键值对
          note_id: this.note_id
        },
        method: 'post'
      }).then(res => {
        // console.log(res)
        this.$notify({
          title: '成功',
          message: '获取笔记记录成功',
          type: 'success'
        });
        this.single_note = res.data.data;
        this.getMarkdown()
      }).catch(res => {
        console.log(res);
      })
    },
    // 按笔记的file_address的http地址 获取笔记内容 http://localhost:3000/note/getMarkdown
    getMarkdown () {
      this.$http({
        url: '/note/getMarkdown',
        params: {
          //键值对
          file_address: this.single_note.file_address
        },
        method: 'post'
      }).then(res => {
        // console.log(res)
        this.$notify({
          title: '成功',
          message: '获取markdown笔记内容成功',
          type: 'success'
        });
        this.markdown = res.data;
      }).catch(res => {
        console.log(res);
      })
    },
    

    // 首先加载单条 笔记记录
    // 制作目录
    toc_draw(tocHtml) {
      // http://localhost:8080/#/WatchNote 真实路径
      // 错误路径 http://localhost:8080/#/应用级别中间件
      // 此路不通，尝试切换css来达到目的 controlWatchNote
      // tocHtml = tocHtml.replace(/#/g,"/WatchNote/#") 
      this.tocHtml = tocHtml;
      // console.log(tocHtml)
    },
    // 控制页面，防暴走
    controlWatchNote() {
      this.control_CSS = 'WatchNote_Control'
      this.control_BEFORE = 'ShanLiangDengChang'
    }
  }
}
</script>

<style lang="less" scoped>
// 控制上边距，防止点击目录后页面暴走
.WatchNote_Control {
  background: rgba(245, 246, 249, .9725490196078431);
  width: 100%;
  height: auto;
  min-height: 760px;

  padding: 10px;
  box-sizing: border-box;

  position: absolute;

  display: flex;
}

// ======================================================
// 原始style，安静的乖孩子
.WatchNote {
  width: 95%;
  height: auto;
  min-height: 760px;

  padding: 10px;
  box-sizing: border-box;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
}

// 目录
.md_directory {
  // text-align: center;
  width: 15%;
  height: auto;
  min-height: 100px;
  max-height: 400px;

  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(50px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  transition: all 0.3s ease 0s;

  border-radius: 10px;

  overflow: scroll;
}

/* 去除滚动栏，保留滚动效果*/
.md_directory::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}


// 文章内容
.md_watch {
  padding: 10px;
  padding-bottom: 100px;
  margin-left: 10px;
  box-sizing: border-box;
  width: 71%;
  height: 760px;

  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(50px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  transition: all 0.3s ease 0s;

  border-radius: 10px;

  overflow: scroll;

  .vue-markdown {
    width: 100%;
    height: auto;
    min-height: 750px;
    // .table-of-contents {
    //   display: hidden;
    // }
  }
}

/* 去除滚动栏，保留滚动效果*/
.md_watch::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

// 点赞收藏按钮
.md_start {
  width: 5%;
  height: 250px;
  background-color: aquamarine;
  text-align: center;

  padding: 10px;
  margin-left: 10px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(50px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  transition: all 0.3s ease 0s;

  border-radius: 10px;

  .ms_link {
    margin-bottom: 10px;

    .el-button {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    }
  }
}
</style>
